<template>
  <div>
    <Navbar appTitle="不合格品处理" />
    <div
      class="search-content wrap-apply"
      :style="{
        top: GLOBAL.currentEnvironment ? '0' : '',
        height: GLOBAL.currentEnvironment ? '100vh' : 'calc(100vh - 1rem)',
        paddingBottom: GLOBAL.currentEnvironment ? '0.66rem' : '',
      }"
    >
      <div v-for="(g, i) in handleList" :key="i">
        <van-cell-group style="margin-top: 0.2rem">
          <p class="label FormTit"><span></span>工单编号</p>
          <van-field disabled v-model="g.orderCode" placeholder="请输入" />
          <div class="bottomLine"></div>
        </van-cell-group>
        <van-cell-group>
          <p class="label FormTit"><span></span>生产物料</p>
          <van-field disabled v-model="g.goodsName" />
          <div class="bottomLine"></div>
        </van-cell-group>
        <van-cell-group>
          <p class="label FormTit"><span></span>工序</p>
          <van-field disabled v-model="g.processName" />
          <div class="bottomLine"></div>
        </van-cell-group>
        <van-cell-group>
          <p class="label FormTit"><span></span>批次编号</p>
          <div style="padding:0.1rem 0.16rem"><batch-production :code="g.batchCode" :id="g.batchId"></batch-production></div>
          <div class="bottomLine"></div>
        </van-cell-group>
        <van-cell-group>
          <p class="label FormTit"><span></span>操作人</p>
          <van-field disabled v-model="g.operatorIdText" />
          <div class="bottomLine"></div>
        </van-cell-group>
        <van-cell-group>
          <p class="label FormTit"><span></span>提交时间</p>
          <van-field disabled v-model="g.applyTime" />
          <div class="bottomLine"></div>
        </van-cell-group>
        <van-cell-group>
          <p class="label required FormTit"><span></span>处理方式</p>
          <van-field
            :is-link="!handleTypeText"
            placeholder="请选择"
            readonly
            v-model="handleTypeText"
            @click="visibles = true"
          >
            <div
              slot="right-icon"
              v-show="!!handleTypeText"
              @click.stop="handleConfirm('')"
            >
              <img
                src="~@/assets/img/filedClear.png"
                alt=""
                style="width: 0.16rem"
              />
            </div>
          </van-field>
          <div class="bottomLine"></div>
        </van-cell-group>
        <van-cell-group>
          <p class="label required FormTit"><span></span>处理数量</p>
          <van-field placeholder="请输入" @input="inputNum" v-model="num">
            <template #button>
              <span>{{ g.reportWorkUnitText }}</span>
            </template>
          </van-field>
        </van-cell-group>
        <van-cell-group>
          <p class="label required FormTit"><span></span>不合格工序</p>
          <van-field
            :is-link="!faieldProcessIdText"
            placeholder="请选择"
            readonly
            v-model="faieldProcessIdText"
            @click="visiblesFP = true"
          >
            <div
              slot="right-icon"
              v-show="!!faieldProcessIdText"
              @click.stop="handleConfirmFP('')"
            >
              <img
                src="~@/assets/img/filedClear.png"
                alt=""
                style="width: 0.16rem"
              />
            </div>
          </van-field>
          <div class="bottomLine"></div>
        </van-cell-group>
        <van-cell-group>
          <p class="label required FormTit"><span></span>不合格操作人</p>
          <van-field-checkbox
            :supportClear="true"
            placeholder="请选择"
            v-model="handleList[0].failedOperatorIdText"
            :columns="optionsFPor"
            :option="{ label: 'failedOperatorName', value: 'failedOperatorId' }"
            @confirm="confirmOperator"
          />
          <!-- <van-field
            :is-link="!failedOperatorIdText"
            placeholder="请选择"
            readonly
            v-model="failedOperatorIdText"
            @click="showPopFPor()"
          >
            <div
              slot="right-icon"
              v-show="!!failedOperatorIdText"
              @click.stop="showPopFPor('del')"
            >
              <img
                src="~@/assets/img/filedClear.png"
                alt=""
                style="width: 0.16rem"
              />
            </div>
          </van-field> -->
          <div class="bottomLine"></div>
        </van-cell-group>
      </div>
      <div class="search-bottoms">
        <!-- <span class="btnconfirm" @click="btnConfirm">确定</span> -->
        <van-button
          type="info"
          :loading="loadingSubmit"
          class="btnconfirm"
          loading-text="提交中..."
          @click="btnConfirm"
          >提交</van-button
        >
      </div>
    </div>
    <van-popup v-model="visibles" position="bottom">
      <van-picker
        :columns="options"
        @confirm="handleConfirm"
        @cancel="visibles = false"
        show-toolbar
      />
    </van-popup>
    <van-popup v-model="visiblesFP" position="bottom">
      <van-picker
        :columns="optionsFP"
        @confirm="handleConfirmFP"
        @cancel="visiblesFP = false"
        show-toolbar
      />
    </van-popup>
    <van-popup v-model="visiblesFPor" position="bottom">
      <van-picker
        :columns="optionsFPor"
        @confirm="handleConfirmFPor"
        @cancel="visiblesFPor = false"
        show-toolbar
      />
    </van-popup>
  </div>
</template>
<script>
import Navbar from "@/components/navBar/navBar_right";
import { messNotQualityHandleIinfoHandle } from "@/api/system";
import { commafy, clearNoNum } from "@/utils/util";
import { APILX } from "@/api/requestLx";
import { queryOperatorByFailedProcessId } from "@/api/mobile";
import VanFieldCheckbox from "@/components/ActionSheet/VanFieldCheckbox";
import BatchProduction from '@/components/BatchProduction'
export default {
  name: "materialRequisitionForm", //领料单
  components: {
    Navbar,
    VanFieldCheckbox,
    BatchProduction
  },

  data() {
    return {
      commafy,
      loadingSubmit: false,
      visibles: false,
      visiblesFP: false, //不合格工序
      optionsFP: [], //不合格工序下拉数据
      visiblesFPor: false, //不合格工序操作人弹窗
      optionsFPor: [], //不合格工序操作人下拉数据
      handleList: [],
      options: [
        { text: "返修", value: "repair" },
        { text: "让步接收", value: "compromise" },
        { text: "报废", value: "scrap" },
      ],
      handleTypeText: "",
      faieldProcessIdText: "", //不合格工序
      failedOperatorIdText: "", //不合格工序操作人
      num: "",
    };
  },
  computed: {},
  mounted() {},
  created() {
    this.getDetail();
  },
  methods: {
    showPopFPor(del){
      if(this.handleList[0].failedProcessId == ''){
        this.$toast('请先选择不合格工序')
        return
      }
      if (del == "del") {
        this.handleConfirmFPor("");
      } else {
        if (this.optionsFPor.length == 0) {
            let item = this.optionsFP.filter(
              (each) =>
                each.failedProcessId == this.handleList[0].failedProcessId
            );
            let optionsFPor = [];
            item[0].failedOperatorList.forEach((item) => {
              item.text = item.failedOperatorName;
              item.value = item.failedOperatorId;
              optionsFPor.push(item);
            });
            this.optionsFPor = optionsFPor;
            this.visiblesFPor = true;
        } else {
          this.visiblesFPor = true;
        }
      }
    },
    // 查不合格工序下拉
    getFailedList(v) {
      let par = {
        orderId: v.orderId,
        taskId: v.taskId,
      };
      APILX.queryProcessByOrderTaskId(par).then((res) => {
        console.log(res.result, "res.result");
        this.optionsFP = res.result || [];
        this.optionsFP.forEach((item) => {
          item.text = item.failedProcessName;
          item.value = item.failedProcessId;
        });
        console.log(this.optionsFP, "this.optionsFP");
      });
    },
    // 查不合格工序操作人下拉
    getReportTeam(e) {
      queryOperatorByFailedProcessId({failedProcessId: e.processId, orderId: e.orderId}).then(res => {
        if (res.result) {
          this.optionsFPor = res.result
        }
      })
    },
    confirmOperator(v) {
      console.log(v);
      if (!v) {
        this.handleList[0].failedOperatorIdText = []
        this.handleList[0].failedOperatorId = ''
      } else {
        this.handleList[0].failedOperatorIdText = v
        this.handleList[0].failedOperatorId = v.join(',')
      }
    },
    getFPor(v) {
      if (!v) {
        this.optionsFPor = [];
        return;
      }
      this.getReportTeam(v)
    },
    inputNum() {
      let num = this.num;
      this.num = clearNoNum(num);
      console.log(clearNoNum(num));
    },
    handleConfirm(v) {
      if (!v) {
        this.handleTypeText = "";
        this.handleList[0].handleType = "";
        this.visibles = false;
        this.$forceUpdate();
        return;
      }
      console.log(v);
      this.handleTypeText = v.text;
      this.handleList[0].handleType = v.value;
      this.visibles = false;
    },
    handleConfirmFP(v) {
      console.log(v, "vvvvvvvvvv");
      if (!v) {
        this.faieldProcessIdText = "";
        this.handleList[0].failedProcessId = "";
        this.handleList[0].failedTaskId = "";
        this.visiblesFP = false;
        this.getFPor("");
        return;
      }
      this.faieldProcessIdText = v.text;
      this.handleList[0].failedProcessId = v.value;
      this.handleList[0].failedTaskId = v.failedTaskId;
      this.handleList[0].failedOperatorId = this.handleList[0].operatorId;
      this.handleList[0].failedOperatorIdText = this.handleList[0].operatorId.split(',');
      this.getFPor(this.handleList[0]);
      // console.log(v)
      // this.handleTypeText = v.text
      this.visiblesFP = false;
    },
    handleConfirmFPor(v) {
      console.log(v, "vvvvvvvvvv");
      if (!v) {
        this.failedOperatorIdText = "";
        this.visiblesFPor = false;
        this.$forceUpdate();
        return;
      }
      this.failedOperatorIdText = v.text;
      this.handleList[0].failedOperatorId = this.handleList[0].operatorId.split(',');
      this.visiblesFPor = false;
    },
    getDetail() {
      let list = this.$route.query.list;
      this.handleList = JSON.parse(list);
      let num = this.handleList[0].canHandleNum;
      this.num = num;
      console.log(this.handleList, "this.handleList");
      this.faieldProcessIdText = this.handleList[0].processName; //不合格工序
      this.handleList[0].failedProcessId = this.handleList[0].processId;
      this.handleList[0].failedOperatorId = this.handleList[0].operatorId; //不合格工序操作人
      this.handleList[0].failedOperatorIdText = this.handleList[0].operatorId.split(','); //不合格工序操作人id
      this.handleList[0].failedTaskId = this.handleList[0].taskId; //不合格工序操作人id
      this.getFailedList(this.handleList[0]);
      this.getReportTeam(this.handleList[0]);
    },
    // 表单提交
    btnConfirm() {
      console.log(this.handleList, "this.handleList 提交数据before");
      if (!this.handleList[0].handleType) {
        this.$toast("请选择处理方式");
        return;
      }
      if (!this.num) {
        this.$toast("请输入处理数量");
        return;
      }
      if (!this.handleList[0].failedProcessId) {
        this.$toast("请选择不合格工序");
        return;
      }
      if (!this.handleList[0].failedOperatorId) {
        this.$toast("请选择不合格操作人");
        return;
      }
      this.handleList[0].num = this.num;
      this.loadingSubmit = true;
      messNotQualityHandleIinfoHandle(this.handleList).then((res) => {
        if (res.code == 200) {
          this.$toast(res.message);
          this.$router.go(-1);
        } else {
          this.$toast(res.message);
        }
        this.loadingSubmit = false;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
@import "@/assets/theme.scss";
@import "@/views/workManagement/materialRequisition/materialForm.scss";
.search-bottoms {
  width: 100%;
  height: 0.5rem;
  background: #ffffff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: fixed;
  bottom: 0px;
  padding: 0rem 0.11rem;
  box-sizing: border-box;
  font-size: 0.16rem;
  font-weight: 500;
  z-index: 9;
  .btnconfirm {
    flex: 1;
    background: #1890ff;
    box-sizing: border-box;
    height: 0.39rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 0.03rem;
    color: #ffffff;
  }
}
</style>
